<template>
  <div>
    <div class="content">
      <div class="showList">
        <div
          v-for="item in goodsList"
          :key="item.goodsid"
          @click="showGoods(item)"
        >
          <img :src="item.goodsimg" />
          <p class="text">{{ item.goodsname }}</p>
          <p class="price">¥{{ item.goodsprice }}</p>
        </div>
      </div>
    </div>
    <el-dialog
      append-to-body
      v-model="showGoodsVisible"
      title="查看商品"
      width="700"
      center
    >
      <div class="product">
        <h1>{{ showGoodsData.goodsname }}</h1>
      </div>
      <div class="infos">
        <div class="thumb">
          <el-image
            style="width: 300px; height: 300px"
            :src="showGoodsData.goodsimg"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :preview-src-list="srcList"
            :initial-index="4"
            fit="cover"
          />
        </div>
        <div class="buy">
          <p>
            价格:<span class="price">￥{{ showGoodsData.goodsprice }}</span>
          </p>
          <p>
            库存:<span>{{ showGoodsData.goodsstock }}</span>
          </p>
          <p>
            状态:<span>{{
              showGoodsData.goodsstatus == 1 ? "上架" : "下架"
            }}</span>
          </p>
          <div class="button">
            <div class="goBuy" @click="saveCart(showGoodsData.goodsid,true)"></div>
            <el-button
              type="primary"
              size="small"
              @click="saveCart(showGoodsData.goodsid)"
            >
              放入购物车
            </el-button>
          </div>
        </div>
      </div>
      <p class="contitle" style="margin-top: 10px">
        <span>商品详情</span>
      </p>
      <p style="padding: 10px">
        {{ showGoodsData.goodsdetails }}
      </p>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { getListPage } from "@/api/goods";
import { addCart } from "@/api/cart";
import { CODE } from "@/utils/StatusCode";
import { ElMessage } from "element-plus";

const store = useStore();
const router = useRouter();
const route = useRoute();

const userInfo = computed(() => {
  return store.getters.getUserInfo;
});

const nowCategory = computed(() => {
  return store.getters.getCategory;
});

const params = reactive({
  currentPage: 1,
  pageSize: 8,
  categoryid: 0,
  level: 0,
});
watch(
  nowCategory,
  (newData, oldData) => {
    getGoodsList();
  },
  { immediate: true, deep: true }
);

// 获取商品列表
interface goods {
  goodsid: number;
  categoryid: number;
  goodsname: string;
  goodsimg: string;
  goodsprice: number;
  promotiontype: number;
  goodsstatus: number;
  goodsstock: number;
  goodsdetails: string;
}
const goodsList = ref<goods[]>([]);

async function getGoodsList() {
  if (nowCategory.value.categoryid == 0) return;
  params.categoryid = nowCategory.value.categoryid;
  params.level = nowCategory.value.level;
  const res = await getListPage(params);
  if (res.code == CODE.OK) {
    goodsList.value = res.data.records;
  }
}
// 查看商品
const showGoodsVisible = ref(false);
let srcList: string[] = [""];
let showGoodsData = reactive<goods>({
  goodsid: 0,
  categoryid: 0,
  goodsname: "",
  goodsimg: "",
  goodsprice: 0,
  promotiontype: 0,
  goodsstock: 0,
  goodsstatus: 0,
  goodsdetails: "",
});
function showGoods(goods: goods) {
  store.dispatch("updateRecently", goods);
  srcList[0] = goods.goodsimg;
  showGoodsData = goods;
  showGoodsVisible.value = true;
}
//放入购物车
async function saveCart(goodsid: number,isBuy?:boolean) {
  const userid=userInfo.value.userid;
  if(!userid){
    ElMessage({
      message: "请先登录",
      type: "warning",
    });
    return
  }
  const res = await addCart({
    userid: userid,
    goodsid: goodsid,
  });
  if (res.code == CODE.OK) {
    ElMessage({
      message: res.message,
      type: "success",
      onClose:()=>{
        if(!isBuy) return
        router.push("/cart");
      }
    });
  }else{
    ElMessage({
      message: res.message,
      type: "error",
    });
  }
}
</script>

<style lang="less" scoped>
.showList {
  padding: 5px;
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fill, 160px);
  grid-gap: 10px;

  & > div {
    width: 160px;
    height: 190px;
    margin-bottom: 4px;
    cursor: pointer;
    font-size: 14px;
    img {
      width: 100%;
      height: 125px;
    }
    .text {
      margin: 8px 0;
    }
    .price {
      color: #c30;
      font-weight: bold;
    }
  }
}
.contitle {
  font-size: 14px;
  line-height: 30px;
  background: url(../../assets/img/bg.png) -230px -100px no-repeat;
  border-bottom: 2px solid #fbaa62;
  padding-left: 25px;
  font-weight: bold;
}
.product {
  border-bottom: 1px dashed #cfcfcf;
  h1 {
    font-size: 18px;
  }
}
.infos {
  margin-top: 10px;
  display: flex;
  .thumb {
    width: 300px;
  }
  .buy {
    width: 440px;
    line-height: 40px;
    padding-left: 10px;
    span {
      padding-left: 4px;
    }
    .price {
      color: #c00;
      font-weight: bold;
      font-size: 24px;
    }
    .button {
      border: 1px solid #ffefd2;
      padding: 10px;
      background: #fff8e7;
      margin: 20px auto;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      .goBuy {
        border: 0;
        margin: 0 10px;
        background: url(../../assets/img/bg.png) left -176px;
        height: 35px;
        width: 144px;
        cursor: pointer;
      }
    }
  }
}
</style>
